<template>
	<div class="step2">
		<a-alert message="确认转账后，资金将直接打入对方账户，无法退回。" show-icon />
		<a-descriptions :column="1" class="mt-5">
			<a-descriptions-item label="付款账户"> ant-design@alipay.com </a-descriptions-item>
			<a-descriptions-item label="收款账户"> test@example.com </a-descriptions-item>
			<a-descriptions-item label="收款人姓名"> 周大壮 </a-descriptions-item>
			<a-descriptions-item label="转账金额"> 500元 </a-descriptions-item>
		</a-descriptions>
		<a-divider />
		<BasicForm @register="register" />
	</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { BasicForm } from '#/components';
import { useForm } from '#/hooks';
import { Alert, Divider, Descriptions } from 'ant-design-vue';
import type { FormSchema } from '#/types';

const step2Schemas: FormSchema[] = [
	{
		field: 'pwd',
		component: 'InputPassword',
		label: '支付密码',
		required: true,
		defaultValue: '123456',
	},
];

export default defineComponent({
	components: {
		BasicForm,
		[Alert.name]: Alert,
		[Divider.name]: Divider,
		[Descriptions.name]: Descriptions,
		[Descriptions.Item.name]: Descriptions.Item,
	},
	emits: ['next', 'prev'],
	setup(_, { emit }) {
		const [register, { validate, setProps }] = useForm({
			labelWidth: 80,
			schemas: step2Schemas,
			actionColOptions: {
				span: 14,
			},
			resetButtonOptions: {
				text: '上一步',
			},
			submitButtonOptions: {
				text: '提交',
			},
			resetFunc: customResetFunc,
			submitFunc: customSubmitFunc,
		});

		async function customResetFunc() {
			emit('prev');
		}

		async function customSubmitFunc() {
			try {
				const values = await validate();
				setProps({
					submitButtonOptions: {
						loading: true,
					},
				});
				setTimeout(() => {
					setProps({
						submitButtonOptions: {
							loading: false,
						},
					});
					emit('next', values);
				}, 1500);
			} catch (error) {}
		}

		return { register };
	},
});
</script>
<style lang="less" scoped>
.step2 {
	width: 450px;
	margin: 0 auto;
}
</style>
